<template>
	<view class="body">
		<view class="tool">
			<view class="Top">
			<view>
				<text>推荐</text>
				<text>健身周边</text>
				<text class="Top_select">商城</text>
			</view>
			<view @click="Search">
				<image src="../../static/Mall/搜索.png"></image>
			</view>
			<input v-if="search==1" type="text" v-model="searchText" @input="SearchChange" />
		</view>
		</view>
		
		<view class="box">
			
		</view>
		<view class="Bottom">
			<view v-for="(item,index) in showArr" :key='index' class="product">
				
				<image :src="'../../static/Mall/'+item.goodsImg" @click="tiaozhuan(item)" class="Imge"></image>
			
				<view class="information">
					<p class="wz">{{item.goodsName}}</p>
					<p class="jifen">积分:{{item.goodsIntegration}}</p>
					<!-- <uni-icons custom-prefix="iconfont" type="icon-search" size="30"></uni-icons> -->
				</view>
			</view>
		</view>
		<view class="tail">
			<text>没有更多了！</text>
		</view>
		<view class="tup1" @click="chakan">
			<uni-icons type="person" size="25" color="#FFFFFF"></uni-icons>
		</view>
		<!-- <view class="tup2">
			<uni-icons type="cart" size="25" color="#FFFFFF"></uni-icons>
		</view> -->
	</view>
</template>

<script>
	import {
		
		reactive
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
		import myRequest from '../../utils/myRequest.js';
	export default {
		setup() {
			let data = reactive({
					searchText: "",
					showArr: [],
					search: 0,
					Arr:[],
				a: 10086,
				
				
				tiaozhuan(item){
					uni.navigateTo({
						url: 'shangpin?id='+item.goodsId
					});
				},
				Search: function() {
					if (data.search == 1) {
						return data.search = 0;
					}
					data.search = 1;
				},
				SearchChange: function() {
					if (data.searchText == "") {
						data.showArr = data.Arr;
					} else {
						data.showArr = [];
						
						data.Arr.forEach((item) => {
							console.log(data.searchText)
							if (item.goodsIntro.includes(data.searchText) || item.goodsName.includes(
									data.searchText)) {
								data.showArr.push(item);
							}
						})
					}
				},
				chakan(){
					uni.navigateTo({
						url: '/pages/My/ChildrenPage/MyOrder'
					});
				}
			});
			onShow(function(){
				if (data.searchText == ""){
					myRequest({
						url:"/getgoods"
					}).then((res)=>{
						if(res.data.code==200){
							data.Arr = res.data.data;
							data.showArr = data.Arr;
							
						}
							
					})
				}
				
			})
			return data;
		},
	}
</script>

<style>

	.Top>input {
		position: absolute;
		left: 30rpx;
		bottom: 0;
		width: 600rpx;
		height: 70rpx;
		padding: 0 20rpx;
		border-radius: 16rpx;
		background-color: #F2F2F2;
	}
	.product{
		  box-shadow: 10rpx 10rpx 5rpx #D8D8D8;
	}
	.tup1{
		text-align: center;
		line-height: 70rpx;
		position: fixed;
		top: 850rpx;
		right: 10rpx;
		width:70rpx;
		height:70rpx;
		border: 1px solid #007AFF;
		border-radius: 50%;
		
		background-color:#007AFF ;
	}
	.tup2{
		text-align: center;
		line-height: 70rpx;
		position: fixed;
		top: 950rpx;
		right: 10rpx;
		width: 70rpx;
		height:70rpx;
		border: 1px solid #007AFF;
		border-radius: 50%;
	
		background-color:#007AFF ;
	}
	.tup1 image{
		width: 100%;
		height: 100%;
	}
	.tup2 image{
		width: 100%;
		height: 100%;
	}
	
	.tool{
		height: 70rpx;
	}
	.tail{
		text-align: center;
		padding-top: 20rpx;
		padding-bottom: 150rpx;
	}
	.tail text{
		color: #C8C7CC;
	}
	.information{
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}
	.wz{
		margin-bottom: 25rpx;
	}
		
	
	.jifen{
		
		color: #2979FF;
	}
	.box{
		height: 30rpx;
	}
	.body {
		padding: 0 30rpx;
		font-size: 30rpx;
	}
.Top {
	width: 730rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}

	.Top>view:nth-of-type(1)>text {
		
			display: inline-block;
			height: 80rpx;
			margin: 0 15rpx;
			padding: 0 15rpx;
			line-height: 80rpx;
		
	}
.Top_select {
	border-bottom: 4rpx solid #1ABC9C;
	box-sizing: border-box;
}

	.Top>view:nth-of-type(2) {
		display: flex;
	}

	.Top>view:nth-of-type(2)>image {
		width: 40rpx;
		height: 40rpx;
	}
	.Bottom {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.Bottom>view {
		width: 340rpx;
		margin-bottom: 50rpx;
		background-color: #FFFFFF;
	}
	.Bottom>view>image{
		display: block;
		width: 100%;
		height: 300rpx;
	}
</style>
